<html>
	<head>
		<wicket:head>
			<style>
				.cp-fttl{
					width:650px;
					float:left;
					padding-top:15px;
					border-bottom:1px dashed #DEDDEF; 
					padding-bottom: 5px;
				}
				.cp-cdtl{
				}
				.cp-cdtl td{
					width:200px;
					text-align:left;
				}
				
				.fttl{
					font-weight: bold;
					color:#666666;
					width:640px;
					padding:3px 5px;
					margin-top:20px;
					background:#EEE;
				}
		
				.finput{
					width:650px;
					margin-top:5px;
					margin-bottom:10px;
				}
			</style>
		</wicket:head>
	</head>

	<body>
		<wicket:panel>
		<form wicket:id="form1">
			<div style="padding-top:10px;">
				<div class="fttl">Course name : </div>
				<input type="text" wicket:id="courseNameEdit" 
					class="finput" style="width:650px;height:22px;border:1px solid #cccccc;"></input>					
			</div>
			<div style="padding-top:10px;">
				<div class="fttl">Course Code : </div>
				<input type="text" wicket:id="courseCode" 
					class="finput" style="width:650px;height:22px;border:1px solid #cccccc;"></input>					
			</div>
			<div style="padding-top:10px;">
				<div class="fttl" style="margin-bottom:5px;">Course Description :</div>	
				<textarea wicket:id="courseDescEdit" 
					class="finput" style="margin-top:10px; border:1px solid #cccccc; padding-bottom:15px;width:650px;height:180px;">
				</textarea>
			</div>
			
			<div style="margin:5px 10px">
				<div class="fttl">Course details : </div>
				<table style="width:200px;margin-top:5px;" class="cp-cdtl stripes">
					<tr>
						<td>Lecture Hours:</td>
						<td><input wicket:id="lectureHoursEdit" type="text" style="width:20px;" value="3"/></td>
					</tr>
					<tr>
						<td>Tutorial Hours:</td>
						<td><input wicket:id="tutorialHoursEdit" type="text" style="width:20px;" value="3"/></td>
					</tr>
					<tr>
						<td>Laboratory Hours:</td>
						<td><input wicket:id="labHoursEdit" type="text" style="width:20px;" value="3"/></td>
					</tr>
					<tr>
						<td>Course Credits:</td>
						<td><input wicket:id="creditsEdit" type="text" style="width:20px;" value="3"/></td>
					</tr>
					<tr>
						<td>Maximum Student Strength:</td>
						<td><input wicket:id="strengthEdit" type="text" style="width:20px;" value="3"/></td>
					</tr>									
				</table>
			</div>

			<div class="cp-fttl"><h4>Prerequisites</h4></div>
			<div style="clear:both;"></div>
			<div style="padding-left: 10px;">
				<div style="line-height: 15px;font-size:12px;padding-top:15px;" wicket:id="prereqList">
					<span style="color:#999; font-weight: bold;" wicket:id="andOr">Any one of these courses</span><br/>
					<div class="stripes">
						<table style="border:1px solid #deddef;">
							<tr wicket:id="preReqs">
								<td style="width:240px;" wicket:id="courseName"></td>
								<td style="width:100px;"><a href="#" wicket:id="remove">Remove</a></td>
							</tr>
						</table>
					</div>
				</div>
				<div style="line-height: 15px;font-size:12px;padding-top:20px;">																
					<span>Add prerequisite courses:</span>
					<select wicket:id="courseOptions">
						<option>Electrical Machines</option>
						<option>Digital Electronics</option>
						<option>Mathematics - I</option>
					</select>	
					<button type="submit" wicket:id="add" class="es-button ui-state-default ui-corner-all">Add</button>
					<div wicket:id="multiplePrereqWmc">
						<div wicket:id="radioGroup">
							<input wicket:id="and" type="radio"></input><span>All selected courses are required.</span><br/>
							<input wicket:id="or" type="radio"></input><span>Any one of the selected courses.</span>
						</div>
					</div>								
				</div>
			</div>				
			<button type="submit" style="margin:10px 0;" class="es-button ui-state-default ui-corner-all">Save</button>
		</form>	
		</wicket:panel>
	</body>
</html>